<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>常用信息 - 个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/userCenter.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/index.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script>
        $(function () {
            $("#userId").val($("#usid").val());
        })
    </script>
</head>
<body>
<div id="app">
    <div class="app-container" data-reactid=".0">
        <div class="layout" data-reactid=".0.0">
            <div class="hContent headerInfo">
                <header th:replace="~{commons::#top}"/>
                <div class="bottom_bar" data-reactid=".0.0.0.1">
                    <span class="before" data-reactid=".0.0.0.1.0"></span>
                    <span class="after" data-reactid=".0.0.0.1.1"></span>
                </div>
            </div>
            <div class="icontainer clearfix" data-reactid=".0.0.1">
                <div class="left-menu" data-reactid=".0.0.1.0">
                    <dl data-reactid=".0.0.1.0.0">
                        <dt data-reactid=".0.0.1.0.0.0">
                            <a th:href="@{/order/list}" data-reactid=".0.0.1.0.0.0.0"><i class="icon-my-order"
                                                                                         data-reactid=".0.0.1.0.0.0.0.0"><img
                                    th:src="@{/images/icon-my-order.png}" data-reactid=".0.0.1.0.0.0.0.0.0"/></i><span
                                    data-reactid=".0.0.1.0.0.0.0.1">我的订单</span></a>
                        </dt>
                    </dl>
                    <dl data-reactid=".0.0.1.0.1">
                        <dt data-reactid=".0.0.1.0.1.0">
                            <div data-reactid=".0.0.1.0.1.0.0">
                                <i class="icon-my-account" data-reactid=".0.0.1.0.1.0.0.0"><img
                                        th:src="@{/images/icon-my-account.png}" data-reactid=".0.0.1.0.1.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.1.0.0.1">我的账户</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.1.1">
                            <a class="" th:href="@{/user/userAccount}" data-reactid=".0.0.1.0.1.1.0">账户余额</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.2">
                            <a class="" th:href="@{/user/userPay}" data-reactid=".0.0.1.0.1.2.0">充值</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.3">
                            <a class="" th:href="@{/user/discount}" data-reactid=".0.0.1.0.1.3.0">优惠券</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.4">
                            <a class="active" th:href="@{/user/usualInfo}" data-reactid=".0.0.1.0.1.5.0">常用信息</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.5">
                            <a class="" th:href="@{/user/initcost}" data-reactid=".0.0.1.0.1.5.0">消费统计</a>
                        </dd>
                    </dl>
                    <dl data-reactid=".0.0.1.0.3">
                        <dt data-reactid=".0.0.1.0.3.0">
                            <div data-reactid=".0.0.1.0.3.0.0">
                                <i class="icon-settings" data-reactid=".0.0.1.0.3.0.0.0"><img
                                        th:src="@{/images/icon-settings.png}" data-reactid=".0.0.1.0.3.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.3.0.0.1">设置</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.3.1">
                            <a class="" th:href="@{/user/updatepwd}" data-reactid=".0.0.1.0.3.1.0">修改密码</a>
                        </dd>
                    </dl>
                </div>

                <div class="right-container" data-reactid=".0.0.1.1">
                    <div class="my-account" data-reactid=".0.0.1.1.0">
                        <div class="my-balance" data-reactid=".0.0.1.1.0.0">
                            <span data-reactid=".0.0.1.1.0.0.0">常用信息：
                                <a class="layui-btn layui-btn-radius layui-btn-xs" id="btn-add">添加</a>
                            </span>
                        </div> 
                        <table id="usualInfoList" lay-filter="usualInfoList" class="layui-hide"></table>
                    </div>
                </div>
            </div>

            <footer th:replace="~{commons::#footer}"/>
        </div>
    </div>
</div>
<!--弹出编辑页面（修改信息）-->
<form class="layui-form layui-form-pane1" id="editForm" name="editForm"  th:action="@{/user/updateUsualInfo}" th:object="${address}" method="post" lay-filter="editForm">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id"   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="contacts" id="contacts"  placeholder="请输入联系人姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phoneNum" id="phoneNum" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" name="area" id="area" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" id="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">修改</button>
        </div>
    </div>
</form>
<!--弹出添加信息页面-->
<form class="layui-form layui-form-pane1" id="addForm" name="addForm"   method="post" lay-filter="addForm">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="addid"   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">userId</label>
        <div class="layui-input-inline">
            <input type="text" name="userId" id="userId"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="contacts" id="addcontacts" lay-verify="required|text" placeholder="请输入联系人姓名"  autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phoneNum" id="addphoneNum" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" name="area" id="addarea" lay-verify="required|text" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" id="addremark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUsualInfo">确认添加</button>
        </div>
    </div>
</form>
<
<script>
    layui.use(['laypage', 'layer', 'table', 'form'], function () {
        var laypage = layui.laypage,
            $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            form = layui.form;

        var usualInfoTab = table.render({
            elem: '#usualInfoList'
            , height: 460
            , url: '/user/usualInfoList' //数据接口
            ,limit: 8
            ,limits: [8, 12, 16]
            , totalRow: true
            , cols: [
                [
                    {field: 'zz', title: '序号', width: 60, align: 'center', type: 'numbers'}
                    , {field: 'contacts', title: '联系人', sort: true, width: 100, align: 'center'}
                    , {field: 'phoneNum', title: '联系电话', sort: true, width: 120, align: 'center'}
                    , {field: 'area', title: '详细地址', sort: true, width: 200, align: 'center'}
                    , {field: 'remark', title: '备注信息', sort: true, width: 200, align: 'center'}
                    , {title:'操作', toolbar: '#barDemo', width:150, align: 'center'}
                    , {field: 'userId', style:"display: none"}

                ]
            ]
            , page: true //开启分页
        });
        //监听行工具事件
        table.on('tool(usualInfoList)', function(obj){
            var data = obj.data;
            console.log(data);
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    delUsualInfo(data);
                });

            } else if(obj.event === 'edit'){
                editUsualInfo(data,obj);
            }
        });
        //根据删除用户常用信息
        function  delUsualInfo(data) {
            $.ajax({
                url: "/user/delUsualInfo/" + data.id,
                type: "DELETE",
                dataType: "json",
                success: function (res) {
                    if(res.code == 200){
                        usualInfoTab.reload();
                    }
                }
            });
        };
        //根据id修改用户常用信息
        function editUsualInfo(data,obj) {
            console.log(obj);
            $("#id").val(data.id);
            $("#contacts").val(data.contacts);
            $("#phoneNum").val(data.phoneNum);
            $("#area").val(data.area);
            $("#remark").val(data.remark);
            layer.open({
                title: "修改常用信息",
                type: 1,
                area: ['400px', '400px'],
                content: $("#editForm"),
            })
        };
        $('#btn-add').on('click', function () {
            layer.open({
                type: 1,
                title: '添加常用信息',
                maxmin: true,
                area: ['420px', '330px'],
                shadeClose: false, //点击遮罩关闭
                content: $("#addForm"),
            });
        });
        form.on('submit(addUsualInfo)', function (res) {
            console.log(res);
            $.ajax({
                url: '/user/addUsualInfo',
                type: 'POST',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    contacts: res.field.contacts,
                    phoneNum: res.field.phoneNum,
                    area: res.field.area,
                    remark: res.field.remark,
                    userId: res.field.userId,
                }),
                success: function (msg) {
                    var returnCode = msg.code;//取得返回数据（Sting类型的字符串）的信息进行取值判断
                    if (returnCode == 200) {
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.msg("添加成功", {icon: 6});
                        setTimeout(function () {
                            location.reload();//刷新页面
                        });
                    } else {
                        layer.msg("添加失败", {icon: 5});
                    }
                }
            });
            return false;//false：阻止表单跳转  true：表单跳转
        })
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>